一、先把網站抓回來

前面學 GSAP 的時候，我們做過一個完整的小網站，最底下還留了一個伏筆為了 Three.js的成果展示，所以放了一個 進入 3D 世界 的按鈕，當時它只是一個按鈕，但現在 Three.js 也學過了，終於可以真的讓它通往 3D 世界。

所以最後幾天，我想把前面做過的東西全部接起來。

二、要怎麼做

這次不需要開新的網頁，只需要用Day19的內容去做延伸，我們的目的是將

原本的GSAP網站 + 進入 3D 世界按鈕 + Three.js 世界

做統一整合變成一個有趣且流暢的網頁。

首先要在 HTML 後面加入 Three.js 世界的版面

<section class="three-world" id="threeWorld">
    <div id="threeContainer"></div>
    <div class="three-content">
        <p>WELCOME TO</p>
        <h2>THREE.JS WORLD</h2>
        <button id="backBtn">← Back to Home</button>
    </div>
</section>

接著要先用 CSS 把 3D 世界隱藏起來，因為初始畫面會是 GSAP 的內容。
到這裡我們已經先建立好 HTML 以及 CSS 所需要的框架，接下來要製作點擊觸發的事件就要到 index.js裡面啦~~

.three-world {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #050505;
    display: none;
    opacity: 0;
    z-index: 200;
}

#threeContainer {
    position: absolute;
    inset: 0;
}

.three-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.three-content h2 {
    font-size: 64px;
}

.three-content button {
    margin-top: 30px;
    pointer-events: auto;
}

三、按鈕有用了

我們要回到前面剛開始學習的地方，點擊按鈕會跳轉頁面到新的世界。

const enterThreeBtn = document.querySelector("#enterThreeBtn");
const threeWorld = document.querySelector("#threeWorld");

enterThreeBtn.addEventListener("click", function() {
    gsap.set(threeWorld, {
        display: "block"
    });

    gsap.to(threeWorld, {
        opacity: 1,
        duration: 1,
        ease: "power2.inOut"
    });
});

這裡既然能跳去 3D 世界，那也要讓他回來，製作方式一樣，讓他回首頁而已。

const backBtn = document.querySelector("#backBtn");

backBtn.addEventListener("click", function() {
    gsap.to(threeWorld, {
        opacity: 0,
        duration: 0.8,
        onComplete: function() {
            gsap.set(threeWorld, {
                display: "none"
            });
        }
    });
});

四、結論

今天先慢慢把整個網頁模板做出來讓我們能先熟悉真的製作一個網站的感覺，經歷過不懈的努力終於把之前做過的 GSAP 網站和最近學的 Three.js 接在一起了，現在 2D 和 3D 已經是同一個網站的一部分。

下一篇，再來把「進入 3D 世界」這件事做得更有感，用 GSAP 做出真正的 2D 到 3D 轉場動畫。